<template>
	<el-card shadow="always">
		<!-- 
		tree-props 修改默认树形表格的取值属性名称
		hasChildren 用于在渲染时判断是否在当前行中需要构成树形数据结构
		三方：vue-table-with-tree-grid
		-->
		<el-table border 
			row-key="id"
			:data="rights"
			:max-height="h-120"
			v-loading="isLoading"
			:tree-props="{children: 'children'}"
		>
			<el-table-column label="序号" width="80" type="index" prop="index"></el-table-column>
			<el-table-column label="权限等级" width="160">
				<template v-slot:default="{ row }">
					<el-tag v-if="row.pid==0" type="" effect="dark" size="mini">一级</el-tag>
					<el-tag v-else-if="(row.pid+'').split(',').length==1" type="success" effect="dark" size="mini">二级</el-tag>
					<el-tag v-else type="warning" effect="dark" size="mini">三级</el-tag>
				</template>
				<!-- <template v-slot:default="{ row }">
					<el-tag v-if="row.level==0" type="" effect="dark" size="mini">一级</el-tag>
					<el-tag v-else-if="row.level==1" type="success" effect="dark" size="mini">二级</el-tag>
					<el-tag v-else type="warning" effect="dark" size="mini">三级</el-tag>
				</template> -->
			</el-table-column>
			<el-table-column label="权限名称" prop="authName"></el-table-column>
			<el-table-column label="路径" prop="path">
				<template v-slot:default="{ row }">{{ "/"+row.path }}</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>
<script>
import {
	getAllRights
} from '@/api/rights.js'
export default {
	props:["h"],
	data() {
		return {
			isLoading:false,
			rights:[]
		}
	},
	methods:{
		async loadAllRights(){
			this.isLoading = true;
			// let roles = await getAllRights("list");
			let roles = await getAllRights("tree");
			this.isLoading = false;
			if(!roles) return;
			this.rights = roles;
		}
	},
	created(){
		this.loadAllRights();
	}
}
</script>